window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var left = focus.querySelector('.l');
    var right = focus.querySelector('.r');
    var circles = focus.querySelector('ol');
    var img = focus.querySelector('ul');

    var offsetWidth = img.children[0].offsetWidth;      //一张图片宽度
    // 鼠标经过，显示和隐藏左右箭头
    focus.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = window.setInterval(function () {
            right.click();
        }, 3000);
    })

    // 根据图片数量，自动创建小圆点个数
    for (var i = 0; i < img.children.length; i++) {
        var li = document.createElement('li');
        circles.appendChild(li);
        if (i == 0) {
            circles.children[0].className = 'color';
        }
    }

    // 点击小圆点事件
    var circle = circles.querySelectorAll('li');
    for (var i = 0; i < circle.length; i++) {
        circle[i].setAttribute('data-index', i);   //给每一个小圆点添加自定义属性
        circle[i].addEventListener('click', function () {
            // 点击小圆点，小圆点变色
            for (var i = 0; i < circle.length; i++) {
                circle[i].className = '';
            }
            this.className = 'color';

            // 点击小圆点，切换图片
            var index = this.getAttribute('data-index');
            animation(img, -index * offsetWidth); //调用

            num = index;
            cir = index;
        })
    }

    // 克隆第一张图片放在最后面
    var img_first = img.children[0].cloneNode(true);
    img.appendChild(img_first);


    // 控制图片滚动
    var num = 0;
    // 控制小圆点
    var cir = 0;
    // 节流阀 防止图片播放过快
    var flag = true;
    // 点击右箭头，图片移动
    right.addEventListener('click', function () {
        if (flag == true) {
            flag = false;
            if (num == img.children.length - 1) {
                num = 0;
                img.style.left = num + 'px';
            }
            num++;
            cir++;
            animation(img, -num * offsetWidth, function () {
                flag = true; //等动画做完再进行下一个动画
            });

            // 点击箭头，小圆点也跟着变化
            if (cir == circle.length) {
                cir = 0;
            }
            circleChange();
        }
    })

    // 点击左箭头，图片移动
    left.addEventListener('click', function () {
        if (flag == true) {
            flag == false;
            if (num == 0) {
                num = img.children.length - 1;
                img.style.left = -num * offsetWidth + 'px';
            }
            num--;
            cir--;
            animation(img, -num * offsetWidth, function () {
                flag = true;
            });

            // 点击箭头，小圆点也跟着变化
            if (cir < 0) {
                cir = circle.length - 1;
            }
            circleChange();
        }
    })

    var circleChange = function () {
        for (var i = 0; i < circle.length; i++) {
            circle[i].className = '';
        }
        circle[cir].className = 'color';
    }

    // 自动播放图片
    var timer = window.setInterval(function () {
        right.click();
    }, 3000);


    /******************************************************* */

    // 节流阀 点击小li时，取消屏幕滚动时背景颜色选择的效果
    var flag = true;
    // 屏幕滑动到固定的位置，导航栏变色
    $(window).scroll(function () {
        if (flag) {
            $(".floor .w").each(function (index, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top - 10) {
                    $(".fixedtool li").eq(index).addClass("current").siblings().removeClass("current");
                } else {
                    $(".fixedtool li").eq(index).removeClass("current");
                }
            });
        }
    });


    // 点击导航栏，移动到固定的位置
    $(".fixedtool li").click(function () {
        flag = false;
        var index = $(".floor .w").eq($(this).index()).offset().top;
        $("body,html").stop().animate({
            scrollTop: index
        }, function () {
            flag = true;
        });

        $(this).addClass("current").siblings().removeClass("current");
    });


});












